import React from 'react';
import { Route } from 'react-router-dom';
import Index from '../index';
import News from '../news';
import Houselist from '../houselist';
import Profile from '../profile';
import { TabBar } from 'antd-mobile';
import './index.css';

export default class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: this.props.history.location.pathname
    };
  }

  tabItems = [{
    title: '首页',
    icon: 'icon-ind',
    path: '/home'
  },
  {
    title: '找房',
    icon: 'icon-findHouse',
    path: '/home/houselist'
  },
  {
    title: '资讯',
    icon: 'icon-infom',
    path: '/home/news'
  },
  {
    title: '我的',
    icon: 'icon-my',
    path: '/home/profile'
  }];

  renderTabBar = () => {
    return (<TabBar
      noRenderContent={true}
      unselectedTintColor="#949494"
      tintColor="green"
      barTintColor="white"
      hidden={this.state.hidden}
    >
      { this.tabItems.map(item => {
        return (<TabBar.Item
          title={item.title}
          key={item.path}
          icon={<i className={`iconfont ${item.icon}`}></i>}
          selectedIcon={<i className={`iconfont ${item.icon}`}></i>}
          selected={this.state.selectedTab === item.path}
          onPress={() => {
            this.props.history.push(item.path)
            this.setState({
              selectedTab: item.path
            })
          }}
          data-seed="logId"
        >
        </TabBar.Item>)
      })}
    </TabBar>)
  }

  componentDidUpdate = (prevProps, prevStates) => {
    if( prevProps.history.location.pathname === this.state.selectedTab) {
      return 
    }

    this.setState({
      selectedTab: prevProps.history.location.pathname
    })
  }

  render() {
    return (
      <div className="homeBox" style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
        <Route exact path="/home" component={Index} />
        <Route path="/home/houselist" component={Houselist} />
        <Route path="/home/news" component={News} />
        <Route path="/home/profile" component={Profile} />

        {this.renderTabBar()}
      </div>
    );
  }
}